/**
 * 保存或更新教师信息
 */
<template>
  <div class="new-app-container-fragment">
    <el-form
      ref="userInfoForm"
      :model="userInfoForm"
      :rules="rules"
      label-width="100px"
      class="demo-userInfoForm"
    >
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>个人信息表</span>
        </div>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="姓名" prop="fullName">
              <el-input v-model="userInfoForm.fullName" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="性别" prop="gender">
              <el-select
                v-model="userInfoForm.gender"
                clearable
                placeholder="请选择"
              >
                <el-option
                  v-for="item in genderOptions"
                  :key="item.label"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="账号" prop="username">
              <el-input v-model="userInfoForm.username" disabled clearable />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="密码" prop="password">
              <el-input v-model="userInfoForm.password" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="生日" prop="birthDate">
              <el-date-picker
                v-model="userInfoForm.birthDate"
                value-format="yyyy-MM-dd"
                type="date"
                clearable
                style="width: 150px"
                placeholder="请选择"
                @change="setAge(userInfoForm.birthDate)"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="年龄" prop="age">
              <el-input v-model="userInfoForm.age" disabled clearable />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="联系方式" prop="contactWay">
              <el-input v-model="userInfoForm.contactWay" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="6" v-if="teacherInfoStatus">
            <el-form-item label="职称" prop="teachersTitle">
              <el-input v-model="userInfoForm.teachersTitle" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="6" v-if="teacherInfoStatus">
            <el-form-item label="工资" prop="salary">
              <el-input v-model="userInfoForm.salary" disabled clearable />
            </el-form-item>
          </el-col>
          <el-col :span="6" v-if="teacherInfoStatus">
            <el-form-item label="请假天数" prop="leaveDays">
              <el-input v-model="userInfoForm.leaveDays" disabled clearable />
            </el-form-item>
          </el-col>
          <el-col :span="6" v-if="teacherInfoStatus">
            <el-form-item label="加班天数" prop="overDays">
              <el-input v-model="userInfoForm.overDays" disabled clearable />
            </el-form-item>
          </el-col>
          <el-col :span="6" v-if="studnetInfoStatus">
            <el-form-item label="班级" prop="classId">
              <el-select
                v-model="userInfoForm.classId"
                clearable
                placeholder="请选择"
              >
                <el-option
                  v-for="item in classList"
                  :key="item.className"
                  :label="item.className"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" v-if="studnetInfoStatus">
            <el-form-item label="年级"  prop="grade">
              <el-input v-model="userInfoForm.grade" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="6" v-if="studnetInfoStatus">
            <el-form-item label="学校" prop="school">
              <el-input v-model="userInfoForm.school" clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col v-if="teacherInfoStatus">
            <el-form-item label="相关介绍" prop="description">
              <el-input
                type="textarea"
                v-model="userInfoForm.description"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-button type="primary" @click="submituserInfoForm">保存</el-button>
        </el-row>
      </el-card>
    </el-form>
  </div>
</template>

<script>
import {
  getTeacherInfo,
  saveOrUpdateTeacher,
  getStudentInfo,
  saveOrUpdateStudent,
} from "../../api/user";
import { getInfo, saveOrUpdateUser } from "../../api/user";
import { classList } from "../../api/other";
import { getToken } from "@/utils/auth";

export default {
  name: "userInfoFormPage",
  data() {
    return {
      userInfoForm: {
        id: "",
        fullName: "",
        username: "",
        password: "",
        birthDay: "",
        gender: "",
        age: "",
        contactWay: "",
        roleName: 1,
        teachersTitle: "",
        salary: "",
        leaveDays: "",
        overDays: "",
        description: "",
      },
      genderOptions: [
        {
          label: "男",
          value: 1,
        },
        {
          label: "女",
          value: 0,
        },
      ],
      roleName: "",
      saveOrUpdateProjectInfoStatus: false,
      teacherInfoStatus:false,
      studnetInfoStatus:false,
      projectInfo: null,
      classList: {},
      rules: {
        fullName: [{ message: "请输入姓名", trigger: "blur", required: true }],
        gender: [
          {
            message: "请选择性别",
            trigger: ["blur", "change"],
            required: true,
          },
        ],
        username: [{ message: "请输入账号", trigger: "blur", required: true }],
        password: [{ message: "请输入密码", trigger: "blur", required: true }],
        birthDate: [
          {
            message: "请选择生日",
            trigger: ["blur", "change"],
            required: true,
          },
        ],
        age: [{ message: "请输入年龄", trigger: "blur", required: true }],
        contactWay: [
          { message: "请输入联系方式", trigger: "blur", required: true },
        ],
        roleName: [{ message: "请选择角色", trigger: "blur", required: true }],
      },
    };
  },
  created() {
    this.findClassList(); 
    this.getUserInfo();
  },
  methods: {
    submituserInfoForm() {
      this.$refs["userInfoForm"].validate((valid) => {
        if (valid) {
          switch (this.roleName) {
            case 1:
              this.updateTeacher();
              break;
            case 2:
              this.updateStudent();
              break;
            default:
              this.updateUser();
              break;
          }
        }
      });
    },

    /** 人员详情 */
    getUserInfo() {
      console.log("开始执行请求,token为");
      const id = getToken();
      console.log(id);
      getInfo(id).then((res) => {
        if (res.status === 200 && res.data.code === "0") {
          this.userInfoForm = res.data.data;
          this.roleName = res.data.data.roleName;
          switch (this.roleName) {
            case 1:
              this.showTeacherInfo(id);
              this.teacherInfoStatus = true
              break;
            case 2:
              this.showStudentInfo(id);
              this.studnetInfoStatus = true
              break;
            default:
              break;
          }
        }
      });
    },
    /** 学员详情 */
    showStudentInfo(id) {
      getStudentInfo(id).then((res) => {
        if (res.status === 200 && res.data.code === "0") {
          this.userInfoForm = res.data.data;
        }
      });
    },
    /** 教师详情 */
    showTeacherInfo(id) {
      getTeacherInfo(id).then((res) => {
        if (res.status === 200 && res.data.code === "0") {
          this.userInfoForm = res.data.data;
        }
      });
    },
    //更新用户信息
    updateUser() {
      saveOrUpdateUser(this.userInfoForm).then(
        (res) => {
          if (res.status === 200 && res.data.code === "0") {
            this.$message.success("保存成功");
          } else {
            this.$message({
              message: res.data.message,
              type: "error",
            });
          }
        },
        (err) => {
          this.$message.error("保存失败，请重试");
        }
      );
    },
    //更新教师信息
    updateTeacher(){
      saveOrUpdateTeacher(this.userInfoForm).then(
        (res) => {
          if (res.status === 200 && res.data.code === "0") {
            this.$message.success("保存成功");
          } else {
            this.$message({
              message: res.data.message,
              type: "error",
            });
          }
        },
        (err) => {
          this.$message.error("保存失败，请重试");
        }
      );
    },
    //更新学员信息
    updateStudent(){
      saveOrUpdateStudent(this.userInfoForm).then(
        (res) => {
          if (res.status === 200 && res.data.code === "0") {
            this.$message.success("保存成功");
          } else {
            this.$message({
              message: res.data.message,
              type: "error",
            });
          }
        },
        (err) => {
          this.$message.error("保存失败，请重试");
        }
      );
    },

    //查找课程信息
    findClassList() {
      const seachForm = { pageNum: 1, pageSize: 10000 };
      classList(seachForm).then(
        (res) => {
          if (res.status === 200 && res.data.code === "0" && res.data) {
            this.classList = res.data.data.list;
          } else {
            this.message.error(res.data.message);
          }
        },
        (err) => {
          // console.log("错误");
          this.message.error("请求出错");
        }
      );
    },

    //设置年龄，采用周岁算法：每过一个生日就长一岁
    setAge(strBirthday) {
      let returnAge,
        strBirthdayArr = strBirthday.split("-"),
        birthYear = strBirthdayArr[0],
        birthMonth = strBirthdayArr[1],
        birthDay = strBirthdayArr[2],
        d = new Date(),
        nowYear = d.getFullYear(),
        nowMonth = d.getMonth() + 1,
        nowDay = d.getDate();
      if (nowYear == birthYear) {
        returnAge = 0; //同年 则为0周岁
      } else {
        let ageDiff = nowYear - birthYear; //年之差
        if (ageDiff > 0) {
          if (nowMonth == birthMonth) {
            let dayDiff = nowDay - birthDay; //日之差
            if (dayDiff < 0) {
              returnAge = ageDiff - 1;
            } else {
              returnAge = ageDiff;
            }
          } else {
            let monthDiff = nowMonth - birthMonth; //月之差
            if (monthDiff < 0) {
              returnAge = ageDiff - 1;
            } else {
              returnAge = ageDiff;
            }
          }
        } else {
          returnAge = -1; //返回-1 表示出生日期输入错误 晚于今天
        }
      }
      this.userInfoForm.age = returnAge; //得到周岁年龄
    },

  },
};
</script>
<style lang="scss" scoped>
.new-app-container-fragment {
  .form-title {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 15px;
  }
}
.total {
  text-align: right;
  margin: 10px 0;
}
.tip {
  text-align: right;
  color: red;
  font-size: 14px;
}
.box-card {
  margin-bottom: 15px;
}
</style>
